<template>
  <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
    <div class="avue-header">
      <!-- 顶部导航栏 -->
      <top ref="top" />
    </div>
    <!-- <div class="avue-shade"  @click="showCollapse"></div> -->
    <div class="color-list">
      <div
        class="color-item"
        v-for="color in colors"
        v-dragging="{ item: color, list: colors, group: 'color' }"
        :key="color.text"
        :style="{ background: color.text }"
      >
        {{ color.text }}
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import tags from "./tags";
import search from "./search";
import top from "./top/";
import sidebar from "./sidebar/";
import admin from "@/util/admin";
import { validatenull } from "@/util/validate";
import { calcDate } from "@/util/date.js";
import { getStore } from "@/util/store.js";
import { resetRouter } from "@/router/router.js";
export default {
  components: {
    top,
    tags,
    search,
    sidebar,
  },
  name: "index",
  provide() {
    return {
      index: this,
    };
  },
  data() {
    return {
      //搜索控制
      isSearch: false,
      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: "",
      colors: [
        {
          text: "Aquamarine",
        },
        {
          text: "Hotpink",
        },
        {
          text: "Gold",
        },
        {
          text: "Crimson",
        },
        {
          text: "Blueviolet",
        },
        {
          text: "Lightblue",
        },
        {
          text: "Cornflowerblue",
        },
        {
          text: "Skyblue",
        },
        {
          text: "Burlywood",
        },
      ],
    };
  },
  created() {
    //实时检测刷新token
    this.refreshToken();
  },
  mounted() {
    this.init();
    this.$dragging.$on("dragged", ({ value }) => {
      // console.log(value.item);
      // console.log(value.list);
      // console.log(value.otherData);
    });
    // this.$dragging.$on('dragend', (res) => {
    //     console.error(res);
    // })
  },
  computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
  props: [],
  methods: {
    showCollapse() {
      this.$store.commit("SET_COLLAPSE");
    },
    // 初始化
    init() {
      this.$store.commit("SET_SCREEN", admin.getScreen());
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit("SET_SCREEN", admin.getScreen());
        }, 0);
      };
      this.$store.dispatch("FlowRoutes").then(() => {});
    },
    //打开菜单
    openMenu(item = {}) {
      this.$store.dispatch("GetMenu", item.id).then((data) => {
        // if (data.length !== 0) {
        //   resetRouter(); //重置路由，校验所有权限
        //   this.$router.$avueRouter.formatRoutes(data, true);
        // }
        //当点击顶部菜单后默认打开第一个菜单
        /*if (!this.validatenull(item)) {
            let itemActive = {},
              childItemActive = 0;
            if (item.path) {
              itemActive = item;
            } else {
              if (this.menu[childItemActive].length === 0) {
                itemActive = this.menu[childItemActive];
              } else {
                itemActive = this.menu[childItemActive].children[childItemActive];
              }
            }
            this.$store.commit('SET_MENU_ID', item);
            this.$router.push({
              path: this.$router.$avueRouter.getPath({
                name: (itemActive.label || itemActive.name),
                src: itemActive.path
              }, itemActive.meta)
            });
          }*/
      });
    },
    // 定时检测token
    refreshToken() {
      this.refreshTime = setInterval(() => {
        const token =
          getStore({
            name: "token",
            debug: true,
          }) || {};
        const date = calcDate(token.datetime, new Date().getTime());
        if (validatenull(date)) return;
        if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
          this.refreshLock = true;
          this.$store
            .dispatch("refreshToken")
            .then(() => {
              this.refreshLock = false;
            })
            .catch(() => {
              this.refreshLock = false;
            });
        }
      }, 10000);
    },
  },
};
</script>

<style scoped>
.avue-header {
  padding: 0;
  /* box-shadow: 0px 0px 20px rgb(12, 12, 12); */
}
.color-list {
  width: 100%;
  height: 500px;
  border: 1px solid steelblue;
  /* display: flex;
  justify-content: space-between;
  flex-wrap: wrap; */
}
.color-item {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  margin: 10px;
  text-align: center;
  line-height: 200px;
  transition: transform 0.3s;
}
</style>
